<!--此页面是做为添加孩子时候input的组件页使用，用来输入各种需要的值-->
<template>
  <div class="change-class body-bg">
    <div class="input-cont">
      <van-field
        clearable
        :maxlength="maxlength"
        :value="value"
        :type="type"
        :placeholder="placeholder"
        @change="getValue"
      />
    </div>
    <!-- tip -->
    <!-- <p v-if="showTip" class="tips">{{tip}}</p> -->
    <!-- submit -->
    <div class="submit-btn">
      <van-button v-if="!loadingBtn" round color="#00B8EE" block @click="savePhone">保存</van-button>
      <van-button v-else round disabled="true" :loading="loadingBtn" loading-text="保存中..." color="#00B8EE" block></van-button>
    </div>
    <!-- 通知对应的节点容器 -->
    <van-notify id="van-notify" />
  </div>
</template>

<script>
var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
import Notify from '../../../static/vant/notify/notify';
export default {
  data() {
    return {
      loadingBtn: false,
      title: "",
      type: "",
      value: "",
      maxlength: "",
      placeholder: "",
      showTip: false,
      tip: ""
    }
  },
  onLoad(e) {
    console.log(e)
    this.title = e.title;
    this.type = e.type;
    this.value = e.value;
    this.maxlength = e.maxlength;
    this.placeholder = "请输入" + e.title;
    wx.setNavigationBarTitle({
      title: e.title
    })
    if(e.title == "孩子姓名"){
      this.showTip = true;
      this.tip = "4-20个字符，可由中文、英文、数字、“-”、“_”组成";
    }
  },
  // onUnload() {
  //   this.showTip = false;
  // },
  methods: {
    // 获取输入值
    getValue(e) {
      this.value = e.mp.detail.trim();
    },
    // 保存
    savePhone() {
      let that = this;
      if(this.title == "姓名"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写姓名' });
          return
        }
        this.$store.commit("setName", this.value);
        this.loadingBtn = true;
      }
      if(this.title == "孩子姓名"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写姓名' });
          return
        }
        this.$store.commit("setChildName", this.value);
        this.loadingBtn = true;
      }
      if(this.title == "身份证号"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写身份证号' });
          return
        }
        if(!idcardReg.test(this.value)){
          Notify({ type: 'warning', message: '身份证号错误' });
          return
        }
        this.$store.commit("setIdCard", this.value);
        this.loadingBtn = true;
      }
      if(this.title == "身高"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写身高' });
          return
        }
        this.$store.commit("setHeight", this.value);
        this.loadingBtn = true;
      }
      if(this.title == "体重"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写体重' });
          return
        }
        this.$store.commit("setWeight", this.value);
        this.loadingBtn = true;
      }
      if(this.title == "衣服尺码"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写衣服尺码' });
          return
        }
        this.$store.commit("setClothingSize", this.value);
        this.loadingBtn = true;
      }
      if(this.title == "鞋子尺码"){
        if(this.value.trim() == ""){
          Notify({ type: 'warning', message: '请填写鞋子尺码' });
          return
        }
        this.$store.commit("setFootSize", this.value);
        this.loadingBtn = true;
      }
      wx.showToast({
        title: '保存成功',
        icon: 'success',
        success: function() {
          setTimeout(() => {
            wx.navigateBack({
              delta: 1
            })
            that.loadingBtn = false;
          }, 1500);
        }
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .input-cont{
    width: 100%;
    background: #fff;
    margin-top: 10px;
  }
  .tips{
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    font-size: 12px;
    color: #999;
  }
  .submit-btn{
    width: 92%;
    margin: 40px 4%;
    border-radius:5px;
    position: fixed;
    bottom: 0;
  }
}
</style>
